<template>
	<view class="content">
		<!-- 遮罩层 -->
		<view v-if="popoverVisible" @click="popoverVisible = false" class="masking"></view>
		<view class="select-boxes" @click="togglePopover">
			<text class="font-26 color-black mar-right-6">{{ activeTab === 0 ? $t('mobile_phone_number') : $t('email') }}</text>
			<u-icon name="arrow-down-fill" color="#000000" size="14" />
		</view>
		<view v-if="popoverVisible" class="popover">
			<view @click.stop="toggleActiveTab(0)" class="popover-select line">
				<u-icon name="checkmark-circle-fill" :color="activeTab === 0 ? '#20B759' : '#CCCCCC'" size="24" />
				<text class="mar-left-15"
					:style="{color: activeTab === 0 ? '#20B759' : '#CCCCCC'}">{{ $t('mobile_phone_number') }}</text>
			</view>

			<view @click.stop="toggleActiveTab(1)" class="popover-select">
				<u-icon name="checkmark-circle-fill" :color="activeTab === 1 ? '#20B759' : '#CCCCCC'" size="24" />
				<text class="mar-left-15"
					:style="{color: activeTab === 1 ? '#20B759' : '#CCCCCC'}">{{ $t('email') }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'

	const emit = defineEmits(['change'])

	const activeTab = ref(0)
	const popoverVisible = ref(false)

	const toggleActiveTab = (index) => {
		activeTab.value = index
		popoverVisible.value = false
		emit('change', activeTab.value)
	}

	const togglePopover = () => {
		popoverVisible.value = !popoverVisible.value
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		/* #ifdef APP-PLUS */
		padding-top: 44px !important;
		/* #endif */

		.select-boxes {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 44rpx;
			padding: 5rpx 27rpx;
			font-size: 26rpx;
			border-radius: 40rpx;
			background: rgba(104, 107, 127, .09);
		}

		.popover {
			position: absolute;
			left: 50%;
			top: 98px;
			z-index: 999;
			transform: translate(-50%, -50%);
			min-width: 240rpx;
			background-color: #FFFFFF;
			padding: 10rpx 30rpx;
			border-radius: 10rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
			box-sizing: border-box;
			animation: fadeInOut 0.3s;


			&::after {
				content: '';
				position: absolute;
				top: -20rpx;
				left: 50%;
				width: 0;
				height: 0;
				border-left: 20rpx solid transparent;
				border-right: 20rpx solid transparent;
				border-bottom: 20rpx solid #FFFFFF;
				transform: translateX(-50%);
			}

			@keyframes fadeInOut {
				0% {
					opacity: 0;
				}

				100% {
					opacity: 1;
				}
			}

			.line {
				border-bottom: 1rpx solid rgba(204, 204, 204, 0.2);
			}

			.popover-select {
				display: flex;
				align-items: center;
				height: 88rpx;
			}
		}
	}

	.masking {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.3);
	}
</style>